<template>
  <div>
    <Modal :mask-closable="false" v-model="opened" :title="title" class="modal-content-layout" width="80%">
      <div class="t-r mb16">
        <Button @click="addScoreItem" type="primary">{{ $t('ledger.NewScoringProject') }}</Button>
      </div>

      <div class="tableContent">
        <table class="scoreTable" style="width: 100%">
          <tr>
            <th class="head"> &nbsp;</th>
            <th class="head">{{ $t('ledger.ScoringItem') }}</th> <!-- 评分项目 -->
            <th class="head">{{ $t('ledger.Abbreviation') }}</th> <!-- 简称 -->
            <th class="head">{{ $t('ledger.Weight') }}</th> <!-- 比例 -->
            <th class="head">{{ $t('common.operation') }}</th> <!-- 操作 -->
          </tr>
          <tr v-for="(item, index) in dmsDeviceScoreItemList" :key="index">
            <td class="cell">
              {{ index + 1 }}
            </td>
            <td class="cell">
              <Input style="border:#dcdee2 solid 1px;" v-model="item.itemName"
                :placeholder="`${$t('common.inputInfo')}`" />
            </td>
            <td class="cell">
              <Input style="border:#dcdee2 solid 1px;" v-model="item.itemShortName"
                :placeholder="`${$t('common.inputInfo')}`" />
            </td>
            <td class="cell">
              <Input style="border:#dcdee2 solid 1px;" type="number" v-model="item.itemRate"
                :placeholder="`${$t('common.inputInfo')}`" max="100" min="0">
              <span slot="suffix" class="suffix">%</span>
              </Input>
            </td>
            <td class="cell">
              <!-- 编辑评分及标准 -->
              <Button type="text" class="operationBtn"
                @click="openScoreStandard(item, index)">{{ $t('ledger.EditScoresAndStandards') }}
              </Button>
              <!-- 删除 -->
              <Button type="text" class="operationBtn" @click="deleted(index)">{{ $t('common.Delete') }}</Button>
            </td>
          </tr>
        </table>
      </div>

      <div slot="footer">
        <Button type="default" @click="close">{{ $t('common.Cancle') }}</Button>
        <Button type="primary" :loading="submitLoading" @click="submit">{{ $t('maintenance.Confirmed') }}</Button>
      </div>
    </Modal>

    <score-standard ref="scoreStandard" @save="saveScoreStandard"></score-standard>
  </div>
</template>

<script>
import ScoreStandard from "./scoreStandard";

export default {
  name: 'scoreItem',
  components: {
    ScoreStandard
  },
  data() {
    return {
      dmsDeviceScoreItemList: [{
        itemName: '',
        itemShortName: '',
        itemRate: '',
        dmsDeviceScoreStandardList: [{
          grade: '',
          standardDesc: ''
        }]
      }],
      currentIndex: 0,
      submitLoading: false,
      opened: false,
      title: ''
    }
  },
  methods: {
    open(title, dmsDeviceScoreItemList) {
      this.dmsDeviceScoreItemList = dmsDeviceScoreItemList;
      this.title = title;
      this.opened = true;
    },
    close() {
      this.opened = false;
    },
    submit() {
      let rateCount = 0;
      if (this.dmsDeviceScoreItemList && this.dmsDeviceScoreItemList.length > 0) {
        for (let item of this.dmsDeviceScoreItemList) {
          if (!item.itemName || !item.itemShortName || (!item.itemRate && Number(item.itemRate) !== 0)) {
            this.$Message.warning(({ content: '有未填项，无法保存', duration: 6, closable: true }));
            return false;
          }

          let dmsDeviceScoreStandardList = item.dmsDeviceScoreStandardList;
          if (dmsDeviceScoreStandardList && dmsDeviceScoreStandardList.length > 0) {
            for (let standard of dmsDeviceScoreStandardList) {
              if (!standard.grade || !standard.standardDesc) {
                this.$Message.warning(({ content: item.itemName + '，评分标准未填写，无法保存', duration: 6, closable: true }));
                return false;
              }
            }
          }

          rateCount += Number(item.itemRate);
        }
      }

      if (Number(rateCount) !== 100) {
        this.$Message.warning(({ content: '比例总和不等于100%', duration: 6, closable: true }));
        return false;
      }

      this.$emit('save', this.dmsDeviceScoreItemList);
      this.opened = false;
      console.log(this.dmsDeviceScoreItemList);
    },
    addScoreItem() {
      this.dmsDeviceScoreItemList.push({
        itemName: '',
        itemShortName: '',
        itemRate: '',
        dmsDeviceScoreStandardList: [{
          grade: '',
          standardDesc: ''
        }]
      });
    },
    saveScoreStandard(dmsDeviceScoreStandardList) {
      this.dmsDeviceScoreItemList[this.currentIndex].dmsDeviceScoreStandardList = dmsDeviceScoreStandardList;
    },
    openScoreStandard(item, index) {

      this.currentIndex = index;
      this.$refs.scoreStandard.open('评分标准配置', JSON.parse(JSON.stringify(item.dmsDeviceScoreStandardList)));
    },
    deleted(index) {
      this.dmsDeviceScoreItemList.splice(index, 1);
    }
  }
}
</script>

<style scoped>
.cell .suffix {
  display: block;
  line-height: 30px;
}

/*.operationBtn {*/
/*    color: #1c82f9;*/
/*}*/

th {
  padding: 8px 0;
  text-align: center;
}

td {
  padding: 8px 18px;
  text-align: center;
}
</style>
